<template>
  <div class="main">
    <div class="nav-bar">
      <van-nav-bar title="商品分类" />
    </div>
    <div class="category">
      <div class="category_word">一级分类:</div>
      <div class="span_word">
        <span  @click="click_category(index, item.ID)" :class="{categoryActive:categoryIndex==index}" v-for="(item, index) in category" :key="index">{{ item.MALL_CATEGORY_NAME }}</span>
      </div>
    </div>
    <div>
      <van-row>
        <van-col span="24">
          <div class="tabGategorySub">
            <span class="category_word">二级分类：</span>
            <div class="span_word">
              <span @click="onClickCategorySub(index)" :class="{categorySubActive:active == index}" v-for="(item, index) in categorySub" :key="index">{{ item.MALL_SUB_NAME }}</span>
            </div>
          </div>
          <div class="list" ref="list">
            <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
              <van-list v-model="loading" :finished="finished" @load="onload">
                <div class="hotGoods">
                  <div v-for="(item, index) in goodsSubList" :key="index">
                    <goods-component :goods="item"></goods-component>
                  </div>
                </div>
              </van-list>
            </van-pull-refresh>
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import url from "@/serviceAPI.config.js";
  import { Toast } from 'vant';
  import { toMoney } from '@/assets/js/filter.js';
  import goodsComponent from "../common/goodsSearch";
  export default {
    name: 'categoryList',
    data() {
      return {
        active: 0,        
        category: [],
        categoryIndex: 0,  // 记录点击的列表索引 用来改变背景颜色
        categorySubIndex: 0,
        categorySub: [],   // 商品子类信息
        loading: false,    // 触发上拉加载时会自动变为 true，要手动变为 false
        finished: false,   // 上拉加载是否有数据，为 true 时上拉不再执行
        page: 1,
        goodsSubList: [],   // 具体的商品子类数据
        categorySubId: '',  // 商品子类ID      
        isRefresh: false,   // 控制是否下拉刷新
        errorImg: 'this.src="' + require('@/assets/image/errorimg.png') + '"'
      }
    },
    filters: {
      toMoney: function(money) {
        return toMoney(money);
      }
    },
    components: {
      goodsComponent
    },
    created() {
      this.getCategoryList();
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      // 获取商品大类数据
      getCategoryList() {
        axios({
          url: url.getCategoryList,
          method: 'get'
        }).then(res => {
          if(res.data.code === 200 && res.data.message){
            this.category = res.data.message;
            this.getCategorySubList(this.category[0].ID);  // 获取第一个大类的子类列表
          }else {
            Toast("数据获取失败");
          }
        })
      },
      // 点击对应大类商品列表
      click_category(index, categoryId) {
        this.getCategorySubList(categoryId);   // 获取子类列表
        this.categoryIndex = index;            // 根据索引改变对应大类颜色
        this.page = 1;                        //  分页数据重置为第一页
        this.finished = false;                //  重置上拉加载效果
        this.goodsSubList = [];               //  分页数据清空
      },
      // 点击大类获取子类列表
      getCategorySubList(categoryId) {
        axios({
          url: url.getCategorySubList,
          method: 'post',
          data: {
            categorySubId: categoryId
          }
        }).then(res => {
          if(res.data.code === 200 && res.data.message) {
            this.categorySub = res.data.message;        // 获取子类列表
            this.categorySubId = this.categorySub[0].ID;// 默认获取第一个子类的ID
            this.active = 0;                            // 重置显示子类的索引
            this.onload();                              // 获取子类第一页分页数据
          }
        }).catch(err => {
          Toast('数据获取失败')
        })
      },
      // 上拉加载方法
      onload() {
        setTimeout(() => {
          this.categorySubId = this.categorySubId?this.categorySubId:this.categorySub[0].ID;
          this.getGoodsSubList();
        }, 1000);
      },
      // 下拉加载方法
      onRefresh() {
        setTimeout(() => {
          this.isRefresh = false;
          this.goodsSubList = []; // 清空原来的分页数据
          this.finished = false;  // 防止不能执行上拉加载方法
          this.page = 1;          // 分页数据重置到第一页
          this.onload();          // 上拉加载第一页分页数据
        }, 500);
      },
      // 获取子类商品分页数据 上拉加载触发
      getGoodsSubList() {
        axios({
          url: url.getGoodsListByCategorySubId,
          method: 'post',
          data: {
            categorySubId: this.categorySubId,
            page: this.page
          }
        }).then(res => {
          if(res.data.code ===200 && res.data.message.length){
            this.page++;
            this.goodsSubList = this.goodsSubList.concat(res.data.message);  //以前的数据和新获得的分页数据合并
          }else {
            this.finished = true;  // 如果后台已经没有分页数据的话就不再执行上拉加载方法
          }
          this.loading = false;
        }).catch(err => {
          console.log(err);
        })
      },
      // 点击子类
      onClickCategorySub(index, title) {
        this.categorySubId = this.categorySub[index].ID;  // 点击子类获取对应ID
        this.goodsSubList = [];                       // 如果点击其他子类就要清空分页数据
        this.active = index;
        this.page = 1;
        this.finished = false;                                // 重置分页页数为 1
        this.onload();
      },
    },
  }
</script>

<style scoped>
.main {
  width: 1226px;
  margin: 0 auto;
}
#leftNav {
  background-color: aliceblue;
  height: 600px;
}
#leftNav ul li {
  line-height: 2.4rem;
  border-bottom: 1px solid #e4e7ed;
  padding: .1875rem;
  font-size: .8rem;
  text-align: center;
}
.category_word {
  width: 800px;
  font-size: 22px;
  display: flex;
}
.span_word {
  display: inline-block;
  margin-left: 100px;
}
.category span {
  line-height: 2.4rem;
  /* border-bottom: 1px solid #e4e7ed; */
  padding: .1875rem;
  font-size: .8rem;
  text-align: center;
  margin-right: 30px;
}
.tabGategorySub .span_word {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #ccc;
}
.tabGategorySub .span_word span {
  font-size: 20px;
  margin-right: 30px;
  margin-bottom: 10px;
  padding: 5px;
}
.categoryActive {
  background-color: #e5017d;
  border-radius: 15px;
}
.categorySubActive {
  background-color: #e5017d;
  border-radius: 13px;
}
.list {
  /* overflow: scroll; */
  min-height: 500px;
  width: 1220px;
}
.list-item{
        display: flex;
        flex-direction: row;
        font-size:0.8rem;
        border-bottom: 1px solid #f0f0f0;
        background-color: #fff;
        padding: 0.3125rem;
    }
#list-div{
    overflow: scroll;
}
.list-item-img{
    flex:8;
}
.list-item-text{
    flex:16;
    margin-top:10px;
    margin-left:10px;
}
.item-price {
  margin-top: 1.2rem;
}
.hotGoods {
  display: flex;
  flex-wrap: wrap;
  padding-left: 130px;
}
</style>